<template>
  <div :style="{ height: (moduleItemData.moduleType === TAG_MODULE_STYLE.RING_MODULE) && '100%' }">
    <tagModule v-if="!moduleItemData.moduleType || moduleItemData.moduleType === TAG_MODULE_STYLE.TAG_MODULE" v-bind="attrProps"/>
    <tagChartModule v-else-if="moduleItemData.moduleType === TAG_MODULE_STYLE.HISTOGRAM_MODULE || moduleItemData.moduleType === TAG_MODULE_STYLE.PIE_MODULE" ref="tagChartModuleRef" v-bind="attrProps"/>
    <ringModule v-else-if="moduleItemData.moduleType === TAG_MODULE_STYLE.RING_MODULE" ref="ringModuleRef" v-bind="attrProps"/>
    <numberModule v-else-if="moduleItemData.moduleType === TAG_MODULE_STYLE.NUMBER_MODULE" v-bind="attrProps"/>
  </div>
</template>

<script>
// import { isNumber } from '@/utils/tools';
// import { numberTextFormat, moneyFilter } from '@/filters/number.js';
// module
import tagModule from './module/tagModule';
import numberModule from './module/numberModule';
import ringModule from './module/ringModule';
import tagChartModule from './module/tagChartModule';
import { TAG_MODULE_STYLE } from '@/utils/const/echarts';

export default {
  name: 'TagItem',
  components: { tagModule, numberModule, ringModule, tagChartModule },
  props: {
    showAreaMaxHeight: {
      type: Number,
      default: 100
    },
    moduleItemData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    columns: {
      type: Array,
      default: () => []
      // default: () => ['日期', '访问用户', '下单用户', '下单率']
    },
    rows: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      TAG_MODULE_STYLE
    };
  },
  computed: {
    styleConfig() {
      return this.moduleItemData.styleConfig;
    },
    monthOnMonthData() {
      return this.moduleItemData.tableData ? this.moduleItemData.tableData.monthOnMonthData || [] : [];
    },
    yearOnYearData() {
      return this.moduleItemData.tableData ? this.moduleItemData.tableData.yearOnYearData || [] : [];
    },
    monthOnMonthTitle() {
      return this.moduleItemData.tableData ? this.moduleItemData.tableData.monthOnMonthTitle || [] : [];
    },
    yearOnYearTitle() {
      return this.moduleItemData.tableData ? this.moduleItemData.tableData.yearOnYearTitle || [] : [];
    },
    tagsData() {
      return this.moduleItemData.tags || [];
    },
    attrProps() {
      return {
        tagsData: this.tagsData,
        showAreaMaxHeight: this.showAreaMaxHeight,
        moduleItemData: this.moduleItemData,
        columns: this.columns,
        rows: this.rows,
        styleConfig: this.styleConfig,
        monthOnMonthData: this.monthOnMonthData,
        yearOnYearData: this.yearOnYearData,
        monthOnMonthTitle: this.monthOnMonthTitle,
        yearOnYearTitle: this.yearOnYearTitle
      };
    }
  },
  methods: {
    resetEchart() {
      if (this.$refs['ringModuleRef']) this.$refs['ringModuleRef'].resetEchart();
      if (this.$refs['tagChartModuleRef']) this.$refs['tagChartModuleRef'].resetEchart();
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
